<script type="text/javascript">
$(document).ready(function(){
    var typeId = "";
    $('#classifier-type').change(function(){
      typeId = $(this).val();
    });
    $('#add-classifier-cancel').click(function(){
        $('#add-classifier-popup').css('display', 'none');
        $('#facade').css('display', 'none');
    });
    $('.close-button').click(function(){
        $('#add-classifier-popup').css('display', 'none');
        $('#facade').css('display', 'none');
    });

    $('#classifier-value').autocomplete({
        minLength: 1,
       // source: "/matter/get-classifier-values",
        source : function(request, response){
          nterm = request.term;
          $.ajax({
            url: "/matter/get-classifier-values",
            dataType: 'json',
            data: { 
                    type_code: typeId,
                    term: request.term
                  },
            success: function(data){
              response(data);
            }
          });
        },
        focus: function( event, ui ){
            return false;
        },
        autoFocus: true,
        select: function( event, ui ){
            $( this ).val( ui.item.value );
            $( "#classifier-value-id" ).val( ui.item.id );
            return false;
        },
    });

    $('#classifier-refers').autocomplete({
        minLength: 1,
        source: "/matter/get-container-caserefs",
        focus: function( event, ui ) {
            return false;
        },
        autoFocus: true,
        select: function( event, ui ) {
            $( "#classifier-refers" ).val( ui.item.value );
            $( "#classifier-refers-id" ).val( ui.item.id );
              return false;
        },
        change: function( event, ui ){
            valid=true;
            if ( !ui.item ) {
                valid=false;
            }
            if ( !valid ) {
                // remove invalid value, as it didn't match anything
                $(this).val( "" );
                $( "#classifier-refers-id" ).val( "" );
                $(this).data( "autocomplete" ).term = "";
                return false;
            }
            return false;
        }
    });

   $('#add-classifier-submit').click(function(){
        var invalid = false;
        $('.validation-errors').empty();
        if($("#classifier-type").val() == ''){
            invalid = true;
            $('.validation-errors').append('<span class="errors">* Select classifier type</span>');
        }
        if($("#classifier-value").val() == ''){
            invalid = true;
            $('.validation-errors').append('<span class="errors">* Classifier value is required</span>');
        }
        if(invalid)
            $('.validation-errors').css('display', 'block');
        else{
            $('.validation-errors').css('display', 'none');
            var matter_ID = $('#this-matter-id').val();
            var container_ID = $('#this-container-id').val();
            if(container_ID == '')
                 container_ID = matter_ID;

            $.ajax({
                url: '/matter/add-classifier',
                type: 'POST',
                data: { type_code: $('#classifier-type').val(),
                        matter_ID: container_ID,
                        value: $('#classifier-value').val(),
                        value_ID: $('#classifier-value-id').val(),
                        url: $('#classifier-url').val(),
                        lnk_matter_ID: $('#classifier-refers-id').val()
                      },
                success: function(data){
                    if( !data.match(/SQLSTATE/) ){
                    $('#add-classifier-popup').css('display', 'none');
                    $('#facade').css('display', 'none');
                    $(location).attr("href", '/matter/view/id/' + container_ID);
                   }else
                      alert(data);
                }
            });
        }
   });
   $( "button, input:button").button();
});
</script>
<style type="text/css" >
#add-classifier-head{
  display:block;
  width: 400px;
  background: #1E4262;
  color: #FFF;
  padding: 5px;
  border: 1px solid #1E4262;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
#add-classifier{
  width: 400px;
  background: whitesmoke;
  display: block;
  border: 1px inset #888;
  padding: 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
#add-classifier label{
  display: inline-block;
  text-align: right;
  width: 100px;
  margin: 0px 5px 10px 0px;
}
#add-classifier input[type="text"]{
  width: 200px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px inset #888;
  padding: 3px 2px;
}
#add-classifier-actions{
  margin: 10px 0px 0px 0px;
  float: right;
}
.close-button{
  background: #f00;
  float:right;
  padding: 2px 4px 0px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
  font-family: arial;
}
.required-field{
  color: #f00;
  font-weight: bold;
  margin-right:4px;
}
.validation-errors{
display:none;
border:1px solid #f00;
color:#f00;
padding:5px;
width: auto;
margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.validation-errors span{
    display: block;
    width: auto;
    margin-left: 20px;
}
#classifier-type{
  width: 206px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px inset #888;
  padding: 3px 2px;
}
</style>
<div class="place-card">
<div id="add-classifier-head">
Add new Classifier <span class="close-button">X</span> 
</div>
<div id="add-classifier">
<div class="validation-errors">

</div>
<form type="post" action="" id="add-classifier-form" >
<label for="classifier-type" >Classifier Type</label>
<select id="classifier-type">
<option value=""> select type </option>
<?php if($this->classifier_types) { 
foreach($this->classifier_types as $classifier){
$selected = "";
if($classifier['code'] == $this->type_code)
  $selected = "selected='selected'";
?>
<option value="<?=$classifier['code']?>" <?=$selected?> ><?=$classifier['type']?></option>
<?php }} ?>
</select>

<label for="classifier-value">Value</label>
<textarea id="classifier-value" style="vertical-align: top;width:200px;" ></textarea>
<input type="hidden" id="classifier-value-id" value="" />
<label for="classifier-url">URL</label>
<input type="text" id="classifier-url" value="" />
<label for="classifier-refers">Refers to</label>
<input type="text" id="classifier-refers" value="" />
<input type="hidden" id="classifier-refers-id" value="" />

<div id="add-classifier-actions">
  <input type="button" id="add-classifier-cancel" value="Cancel" />
  <input type="button" id="add-classifier-submit" value="Add Classifier" />
</div>

</form>
</div>
</div>
